<template>
  <div class="home">
    <div>
      <el-form :inline="true" :model="form">
        <el-form-item label="区域">
          <dx-cascader :area_id.sync="form.areaId" ref="cascader" />
        </el-form-item>
        <el-form-item label="政企属性">
          <el-select v-model="form.custType">
            <el-option v-for="(it, index) in custTypeList" :key="index" :label="it.label" :value="it.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="行业">
          <el-select v-model="form.hsxType">
            <el-option v-for="it in hsxTypeList" :key="it.value" :label="it.label" :value="it.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户经理">
          <el-input v-model="form.manageName" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" id="search_btn" type="primary" @click="handleSearch()">查询</el-button>
        </el-form-item>
      </el-form>

    </div>
    <div class="h-wrapper">
      <h3 class="time">
        截至{{ time.substr(0, 4) }}年{{ time.substr(4, 2) }}月
      </h3>
      <ul class="top">
        <li class="item" v-for="(item, index) in list" :key="index">
          <div class="td">
            <div class="left">
              <p class="name">{{ item.indexName }}</p>
              <p class="num">{{ item.thisMonthValue }}</p>
            </div>
            <div class="right" :class="'img' + index"></div>
          </div>
          <div class="bd">
            <!-- <div class="info">
                            <p class="name">
                                {{ "指标完成率" || item.completeName1 }}
                            </p>
                            <p class="num">{{ item.completeRate + "%" }}</p>
                        </div> -->
            <div class="info">
              <p class="name">
                {{ "同比增长率" || item.completeName1 }}
              </p>
              <p class="num">{{ item.tbYearIncrease + "%" }}</p>
            </div>
          </div>
        </li>
      </ul>
      <div>
        <div class="chartList">
          <div class="item" v-for="(item, index) in myChart" :key="index">
            <div :class="'acc' + index" style="height: 200px; width: 100%"></div>
            <div :class="'accumIncome' + index" style="height: 300px; width: 100%"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { getCookie } from "@/common/js/cookie";
import {
  setSessionStorage,
  getSessionStorage,
  removeSessionStorage,
} from "@/common/js/storage";
export default {
  data() {
    return {
      accountInfo: JSON.parse(getSessionStorage("accountInfo")),
      form: {
        areaId: "",
        custType: "1",
        hsxType: "0",
        manageName: "",
      },
      custTypeList: [
        {
          value: "1",
          label: "客户属性",
        },
        {
          value: "2",
          label: "服务属性",
        },
      ],
      hsxTypeList: [
        {
          value: "0",
          label: "全部",
        },

        {
          value: "1",
          label: "杭客",
        },
        {
          value: "2",
          label: "商客",
        },
        {
          value: "3",
          label: "校园",
        },
        {
          value: "4",
          value: "其他",
        },
      ],
      list: [],
      main: "",
      myChartTop: [],
      myChart: [],
      time: "",
      parentId: "",
    };
  },
  mounted() {
    var that = this;

    that.form.areaId = that.accountInfo.areaId;
    that.getData();
  },
  methods: {
    handleSearch() {
      var that = this;

      that.getData();
    },
    acctMonthData(val) {},
    dataZoomFun(params) {
      var that = this;
      // console.log(params)
      that.myChartTop[+params.dataZoomId].dispatchAction({
        type: "dataZoom",
        start: params.start,
        end: params.end,
        startValue: params.startValue,
        endValue: params.endValue,
      });
    },
    getData() {
      var that = this,
        hsxType = ["全部", "杭客", "商客", "校园", "其他"];

      $budgetAPI.getGovernmentCust(
        {
          areaId: that.form.areaId,
          custType: that.form.custType,
          hsxType: hsxType[that.form.hsxType],
          manageName: that.form.manageName,
        },
        (res) => {
          console.log(res);
          if (res.code == 0) {
            var content = res.content;
            that.list = content.mainBusinessIncome;
            that.myChart = content.reportData;
            that.time = content.acctMonth;
            var main = content.reportData;
            var option = [];
            var optionTop = [];
            var titles = ["主营业务收入", "基本面收入", "DICT收入", "码号收入"];
            var legendData = [],
              seriesData = [],
              seriesTopData = [];
            that.$nextTick(() => {
              main.map((it, i) => {
                that.myChart[i] = that.$echarts.init(
                  document.querySelector(".accumIncome" + i)
                );
                that.myChartTop[i] = that.$echarts.init(
                  document.querySelector(".acc" + i)
                );
                console.log(this.parentId, "this.parentId");
                if (this.parentId == "10") {
                  legendData = [
                    "上年累计完成",
                    "当月完成",
                    "本年累计完成",
                    "年累计收入同比",
                  ];
                  seriesData = [
                    {
                      type: "line",
                      name: "上年累计完成",
                      stack: "总量",
                      smooth: true,
                      data: it.lastYearIncomeList, // wnmainIncomeList
                      yAxisIndex: 1,
                      symbolSize: 10,
                      lineStyle: {
                        normal: {
                          // color: '#f3707c' // 线条颜色
                        },
                      },
                      itemStyle: {
                        normal: {
                          // color: '#ec3b4b',
                          label: {
                            show: true,
                            position: "top",
                            textStyle: {
                              // color: '#f3707c'
                            },
                            formatter: "{c}",
                          },
                        },
                      },
                    },
                    {
                      type: "line",
                      name: "当月完成",
                      stack: "总量",
                      smooth: true,
                      data: it.mainIncomeList,
                      yAxisIndex: 1,
                      symbolSize: 10,
                      lineStyle: {
                        normal: {
                          // color: '#f3707c' // 线条颜色
                        },
                      },
                      itemStyle: {
                        normal: {
                          // color: '#ec3b4b',
                          label: {
                            show: true,
                            position: "top",
                            textStyle: {
                              // color: '#f3707c'
                            },
                            formatter: "{c}",
                          },
                        },
                      },
                    },
                    {
                      type: "line",
                      name: "本年累计完成",
                      stack: "总量",
                      smooth: true,
                      data: it.thisYearIncomeList,
                      yAxisIndex: 1,
                      symbolSize: 10,
                      lineStyle: {
                        normal: {
                          // color: '#f3707c' // 线条颜色
                        },
                      },
                      itemStyle: {
                        normal: {
                          // color: '#ec3b4b',
                          label: {
                            show: true,
                            position: "top",
                            textStyle: {
                              // color: '#f3707c'
                            },
                            formatter: "{c}",
                          },
                        },
                      },
                    },
                  ];
                  seriesTopData = [
                    {
                      type: "line",
                      name: "上年累计完成",
                    },
                    {
                      type: "line",
                      name: "当月完成",
                    },
                    {
                      type: "line",
                      name: "本年累计完成",
                    },
                    {
                      type: "line",
                      name: "年累计收入同比",
                      smooth: true,
                      data: it.tbIncreaseList,
                      yAxisIndex: 1,
                      symbolSize: 10,
                      lineStyle: {
                        normal: {
                          color: "#f3707c", // 线条颜色
                        },
                      },
                      itemStyle: {
                        normal: {
                          color: "#ec3b4b",
                          label: {
                            show: true,
                            position: "top",
                            textStyle: {
                              color: "#f3707c",
                            },
                            formatter: "{c}%",
                          },
                        },
                      },
                    },
                  ];
                  option[i] = {
                    tooltip: {
                      trigger: "axis",
                      axisPointer: {
                        type: "shadow",
                      },
                      // formatter: '{b} <br /> {a0}: {c0}万元'
                    },
                    xAxis: {
                      type: "category",
                      data: it.acctMonths,
                    },
                    yAxis: {
                      type: "value",
                      min: function (value) {
                        return value.min;
                      },
                      max: function (value) {
                        return value.max;
                      },
                    },
                    series: [
                      {
                        data: it.lastYearIncomeList,
                        type: "line",
                        symbolSize: 10,
                        itemStyle: {
                          normal: {
                            // color: '#ec3b4b',
                            label: {
                              show: true,
                              position: "top",
                              textStyle: {
                                // color: '#f3707c'
                              },
                              formatter: "{c}",
                            },
                          },
                        },
                      },
                      {
                        data: it.mainIncomeList,
                        type: "line",
                        symbolSize: 10,
                        itemStyle: {
                          normal: {
                            // color: '#ec3b4b',
                            label: {
                              show: false,
                              position: "top",
                              textStyle: {
                                // color: '#f3707c'
                              },
                              formatter: "{c}",
                            },
                          },
                        },
                      },
                      {
                        data: it.thisYearIncomeList,
                        type: "line",
                        symbolSize: 10,
                        itemStyle: {
                          normal: {
                            // color: '#ec3b4b',
                            label: {
                              show: true,
                              position: "top",
                              textStyle: {
                                // color: '#f3707c'
                              },
                              formatter: "{c}",
                            },
                          },
                        },
                      },
                    ],
                  };
                } else {
                  legendData = ["当月完成", "年累计收入同比"];
                  seriesData = [
                    {
                      type: "bar",
                      name: "当月完成",
                      data: it.mainIncomeList,
                      barWidth: 10,
                      label: {
                        normal: {
                          show: true,
                          position: "top",
                          rotate: 45,
                          distance: 20,
                        },
                      },
                      itemStyle: {
                        emphasis: {
                          barBorderRadius: 15,
                        },
                        color: "#7f92f7",
                        // normal: {
                        //    color: function(params) {
                        //       var c="";
                        //       if(params.data.value == maxData){
                        //         c='#7ed093'
                        //       }else{
                        //         c='#7f92f7'
                        //       }
                        //        return c;
                        //        },
                        // }
                      },
                    },
                  ];
                  seriesTopData = [
                    {
                      type: "bar",
                      name: "当月完成",
                      // data: [0],
                      barWidth: 5,
                      color: "#7f92f7",
                      itemStyle: {
                        emphasis: {
                          barBorderRadius: 30,
                        },
                        color: "#9399b6",
                        normal: {
                          barBorderRadius: [10, 10, 0, 0],
                          label: {
                            show: true,
                            position: "top",
                            textStyle: {
                              color: "#9399b6",
                            },
                          },
                        },
                      },
                    },
                    {
                      type: "line",
                      name: "年累计收入同比",
                      smooth: true,
                      data: it.tbIncreaseList,
                      yAxisIndex: 1,
                      symbolSize: 10,
                      lineStyle: {
                        normal: {
                          color: "#f3707c", // 线条颜色
                        },
                      },
                      itemStyle: {
                        normal: {
                          color: "#ec3b4b",
                          label: {
                            show: true,
                            position: "top",
                            textStyle: {
                              color: "#f3707c",
                            },
                            formatter: "{c}%",
                          },
                        },
                      },
                    },
                  ];
                  option[i] = {
                    tooltip: {
                      trigger: "axis",
                      axisPointer: {
                        type: "shadow",
                      },
                      // formatter: '{b} <br /> {a0}: {c0}万元'
                    },
                    grid: {
                      // top: '-30px',
                      left: "60px",
                      right: "50px",
                      bottom: "80px",
                    },
                    // legend: {
                    //        data: ['月收入环比', '年累计收入同比'],
                    //        right : '0',
                    //    },
                    xAxis: {
                      type: "category",
                      // boundaryGap: false,
                      axisLabel: {
                        interval: 0,
                        // rotate: 40,
                      },
                      data: it.acctMonths,
                      axisLine: {
                        show: true,
                        lineStyle: {
                          color: "#9399b6",
                        },
                      },
                    },
                    yAxis: [
                      {
                        type: "value",
                        // boundaryGap: [0,1],
                        // min: -Math.ceil(absValMax),
                        // max: Math.ceil(absValMax),
                        splitLine: {
                          show: false,
                          lineStyle: {
                            type: "dashed",
                          },
                        }, //去除网格线
                        axisLabel: {
                          formatter: "{value}",
                          show: true,
                        },
                        axisTick: {
                          //y轴刻度线
                          show: false,
                        },
                        axisLine: {
                          //y轴
                          show: true,
                          lineStyle: {
                            color: "#9399b6",
                          },
                        },
                      },
                      {
                        type: "value",
                        // boundaryGap: [0,1],
                        // min: -Math.ceil(absValMax),
                        // max: Math.ceil(absValMax),
                        splitLine: {
                          show: false,
                          lineStyle: {
                            type: "dashed",
                          },
                        }, //去除网格线
                        axisLabel: {
                          formatter: "{value} ",
                          show: true,
                        },
                        axisTick: {
                          //y轴刻度线
                          show: true,
                        },
                        axisLine: {
                          //y轴
                          show: true,
                          lineStyle: {
                            color: "#9399b6",
                          },
                        },
                      },
                      // {
                      //     type: 'value',
                      //     // min: (minData-(minData+maxData1)%2)*2.2,
                      //     // max: maxData * 2,
                      //     // max: Math.max.apply(this, it.mainIncomeList) * 2,
                      //     // interval: 50,
                      //     splitLine: {
                      //         show: true,
                      //         lineStyle: {
                      //             type: 'dashed'
                      //         }
                      //     }, //去除网格线
                      //     axisLabel: {
                      //         show: true
                      //     },
                      //     splitArea: {
                      //         show: true,
                      //         areaStyle: {
                      //             color: '#fff'
                      //         }
                      //     },
                      //     axisTick: {
                      //         //y轴刻度线
                      //         show: false
                      //     },
                      //     axisLine: {
                      //         //y轴
                      //         show: true,
                      //         lineStyle: {
                      //             color: '#9399b6'
                      //         }
                      //     }
                      // },
                      // {
                      //     type: 'value',
                      //     // min: 0,
                      //     splitLine: {
                      //         show: false
                      //     }, //去除网格线
                      //     // max: maxData*2,
                      //     // // interval: 50,
                      //     axisLabel: {
                      //         // formatter: '{value}',
                      //         show: true
                      //     },
                      //     axisTick: {
                      //         //y轴刻度线
                      //         show: false
                      //     },
                      //     axisLine: {
                      //         //y轴
                      //         show: true,
                      //         lineStyle: {
                      //             color: '#9399b6'
                      //         }
                      //     }
                      // }
                    ],
                    dataZoom: [
                      {
                        id: i,
                        type: "slider",
                        show: true,
                        // start:0,
                        // end: 20,
                        // startValue: val.xAxis.length - 12,
                        // endValue: val.xAxis.length - 1,
                        startValue: it.acctMonths.length - 12,
                        endValue: it.acctMonths.length - 1,
                        backgroundColor: "#EBEDF3",
                        showDataShadow: false,
                        borderRadius: [20, 20],
                        fillerColor: "#BEC5D8",
                        height: 13,
                        width: 300,
                        left: "30%",
                        bottom: 10,
                      },
                    ],
                    series: seriesData,
                  };
                }

                optionTop[i] = {
                  title: {
                    text: titles[i],
                    textStyle: {
                      fontSize: 14,
                      color: "#292f3b",
                    },
                    // left: "80",
                  },
                  tooltip: {
                    trigger: "axis",
                    axisPointer: {
                      type: "shadow",
                    },
                    formatter: "{b} <br /> {a0}: {c0}" + "%",
                  },
                  grid: {
                    top: "40px",
                    left: "60px",
                    right: "50px",
                    bottom: "22px",
                  },
                  legend: {
                    data: legendData,
                    right: "0",
                    top: "0",
                  },
                  xAxis: {
                    type: "category",
                    data: it.acctMonths,
                    axisTick: {
                      show: false,
                    },
                    axisLabel: {
                      show: false,
                      // rotate:40 ,
                    },
                    axisLine: {
                      onZeroAxisIndex: 1,
                      lineStyle: {
                        color: "#9399b6",
                        opacity: 0,
                      },
                    },
                  },
                  yAxis: [
                    {
                      type: "value",
                      axisLine: {
                        //y轴
                        show: true,
                        lineStyle: {
                          color: "#9399b6",
                        },
                      },
                    },
                    {
                      type: "value",
                      // boundaryGap: [0,1],
                      // min: -Math.ceil(absValMax),
                      // max: Math.ceil(absValMax),
                      splitLine: {
                        show: false,
                        lineStyle: {
                          type: "dashed",
                        },
                      }, //去除网格线
                      axisLabel: {
                        formatter: "{value} %",
                        show: true,
                      },
                      axisTick: {
                        //y轴刻度线
                        show: false,
                      },
                      axisLine: {
                        //y轴
                        show: true,
                        lineStyle: {
                          color: "#9399b6",
                        },
                      },
                    },
                  ],
                  dataZoom: [
                    {
                      show: false,
                      // start:0,
                      // end: 20,
                      // startValue: val.xAxis.length - 12,
                      // endValue: val.xAxis.length - 1,
                      startValue: it.acctMonths.length - 12,
                      endValue: it.acctMonths.length - 1,
                    },
                  ],
                  series: seriesTopData,
                };

                that.myChartTop[i].setOption(optionTop[i]);
                that.myChart[i].setOption(option[i]);
                that.myChart[i].on("datazoom", (params) => {
                  console.log(params);
                  params.endValue =
                    that.myChart[
                      +params.dataZoomId
                    ]._model.option.dataZoom[0].endValue;
                  params.startValue =
                    that.myChart[
                      +params.dataZoomId
                    ]._model.option.dataZoom[0].startValue;
                  that.dataZoomFun(params);
                });
              });
            });
          }
          // that.list =
        },
        (err) => {}
      );
    },
  },
  created() {
    let obj = JSON.parse(window.sessionStorage.getItem("accountInfo"));
    this.parentId = obj.parentId;
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  // padding: 15px;
  position: relative;
  .h-wrapper {
    padding: 0 20px 25px;
    .time {
      text-align: right;
      padding-bottom: 15px;
    }
  }
  .top {
    display: flex;
    .item {
      flex: 1;
      padding: 35px 25px;
      margin-right: 20px;
      border-radius: 15px;
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
      &:last-child {
        margin-right: 0;
      }
      .td {
        display: flex;
        align-items: center;
        .left {
          flex: 1;
          .name {
            font-size: 14px;
            color: #62769f;
            padding-bottom: 15px;
          }
          .num {
            color: #292f3b;
            font-weight: bold;
            font-size: 20px;
          }
        }
        .right {
          width: 45px;
        }
      }
      .bd {
        margin-top: 25px;
        display: flex;
        .info {
          flex: 1;
          text-align: left;
        }
        // justify-content: space-between;
        .name {
          font-size: 12px;
          color: #7183a8;
        }
        .num {
          margin-top: 8px;
          font-size: 14px;
          color: #292f3b;
          font-weight: bold;
        }
      }
      .img0 {
        background: url("~@/assets/images/common/type1.png") no-repeat;
        width: 45px;
        height: 40px;
        background-size: contain;
      }
      .img1 {
        background: url("~@/assets/images/common/type2.png") no-repeat;
        width: 45px;
        height: 40px;
        background-size: contain;
      }
      .img2 {
        background: url("~@/assets/images/common/type3.png") no-repeat;
        width: 45px;
        height: 40px;
        background-size: contain;
      }
      .img3 {
        background: url("~@/assets/images/common/type4.png") no-repeat;
        width: 45px;
        height: 40px;
        background-size: contain;
      }
    }
  }
  .chartList {
    margin-top: 25px;
    display: flex;
    flex-flow: row wrap;
    .item {
      // flex: 1;
      width: 50%;
    }
  }
}
</style>
